<template>
    <div class="withdraw">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png"
                @click="back">
            <p class="fz37 cfff hpd tc">申请提现</p>
        </div>
        <div class="body">
            <div class="main">
                <div class="form">
                    <div>
                        <p>账户余额</p>
                        <p class="money">￥{{ form.balance }}</p>
                    </div>
                    <div>
                        <p>提现金额</p> <input type="number" v-model="form.withdraw"> 元
                    </div>
                    <div>
                        <p>真实姓名</p><input type="text" v-model="form.realName">
                    </div>
                    <div>
                        <p>请选择银行</p>
                        <el-select v-model="value" placeholder="请选择银行">
                            <el-option v-for="item in form.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <p>请输入银行卡号</p><input type="number" class="numCard" v-model="form.cardNum">
                    </div>
                    <div class="prompt">车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</div>

                </div>
                <div class="btn-fa">
                    <button class="btn" @click="confirm">
                        确认信息并提交
                    </button>
                </div>
            </div>
            <div class="foot">
                <div class="foot-head">提现记录</div>
                <div class="foot-body">
                    <div>
                        <p>商家提现申请</p>
                        <p>核销时间:2022-10-1211:09</p>

                    </div>
                    <div>
                        <p><span>- 100.00</span></p>
                        <p>审核中</p>
                    </div>
                </div>
                <div class="foot-body">
                    <div>
                        <p>商家提现申请</p>
                        <p>核销时间:2022-10-1211:09</p>

                    </div>
                    <div>
                        <p><span>- 100.00</span></p>
                        <p>审核中</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    components: {

    },
    data() {
        return {

            value: '1',
            form: {
                balance: '1500', // 余额--
                withdraw: '2000',//提现
                realName: 'tom',//真实姓名
                options: [{
                    value: '1',
                    label: '银行1'
                }, {
                    value: '2',
                    label: '银行2'
                },],
                cardNum: 625965087177209 //银行卡号
            }



        }

    },
    created(){
        console.log(12222)
    },
    mounted() {

    },
    methods: {
        confirm() {
            this.$router.push('/moneyResult')
            console.log('aaa', this.form)
            // return false;
        },
        back() {
            this.$router.back();
        }
    }
}
</script>
<style scoped>
.withdraw {
    background-color: #f7f7f7;
}

.body {
    font-size: 23rem;
    position: relative;
    bottom: 270rem;
    margin: 0 20rem;
}

.main {
    background-color: #fff;
    padding: 50rem 30rem;
    border-radius: 15rem;
}

.main .form div {
    display: flex;
    align-items: center;
}

.form div:first-child {
    margin-bottom: 35rem;
}

.form div:last-child {
    justify-content: center;
}
.form div p:first-child{
    width: 180rem;
    font-size: 10rem;
}


.money {
    color: #f00;
}

input {
    width: 225rem;
    height: 60rem;
    margin: 15rem 0;
    margin-right: 10rem;
    border-radius: 30rem;
    border: 1rem solid #e8e8e8;
    padding-left: 30rem;
}

>>>.el-input__inner {
    width: 360rem;
    height: 60rem;
    border-radius: 30rem;
    margin: 15rem 0;
    font-size: 23rem;
    padding-left: 30rem;
}

.numCard {
    width: 430rem;
    margin-right: 0rem;
}

.prompt {
    font-size: 20rem;
    color: #808080;
    justify-content: center;
    margin-top: 25rem;
    margin-bottom: 50rem;
}
.btn-fa{
    text-align: center;;
}
.btn {
    color: #fff;
    width: 520rem;
    border-radius: 260rem;
    background: linear-gradient(to right, #3688ff, #0762e6);
    padding: 25rem 0;
    font-size: 25rem;
    border: none;
}

.foot {
    background-color: #fff;
    padding: 25rem 30rem 10rem 30rem;
    border-radius: 15rem;
    margin: 20rem;
}

.foot div:last-child {
    border-bottom: none;
}

.foot-head {
    padding: 15rem 0;
    border-bottom: 7rem solid #f7f7f7;
}

.foot-body {
    display: flex;
    justify-content: space-between;
    padding-top: 20rem;
    border-bottom: 3rem solid #f7f7f7;
}

.foot-body div:last-child {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.foot-body div p:last-child {
    margin: 25rem 0;
    color: #adadad;
    font-size: 20rem;
}

.foot-body span {
    color: #f00;
}
</style>